<template>
	<view class="container">
		<view class="cartItemLogo">
			<up-image :show-loading="true" :src="baseImageUrl+info.cd_url" width="110rpx" height="110rpx" radius="4" @click="click">
				<template v-slot:loading>
					<up-loading-icon color="red"></up-loading-icon>
				</template>
				<template #error>
					<view style="font-size: 24rpx;">加载失败</view>
				</template>
			</up-image>
		</view>
		<view class="goods-info">
			<view class="title">{{info.cd_name}}</view>
			<view class="price">¥<text class="price-inner">{{info.cd_price}}</text></view>
		</view>
		<view class="operate">
			<up-button type="default" customStyle="borderWidth:0" plain color='gray' icon="minus-circle" @click.stop="handleOperate(-1,info)"></up-button>
			<text class='operate-number'>{{info.num}}</text>
			<up-button type="default" customStyle="borderWidth:0" plain color='red' icon="plus-circle" @click.stop="handleOperate(1,info)"></up-button>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/common/api/config.js'
	import { useCartStore } from '@/stores'
	export default {
		props: {
			info: {
				type: Object,
				default () {
					return {};
				}
			}
		},
		emits: ['changeTotal','deleteCartItem'],
		setup(props,context) {
			const cart = useCartStore()
			const baseImageUrl = baseUrl
			const handleOperate = (index, item) => {
				let tempNum = 0
				if(index == -1) {
					tempNum = item.num-1
					if(tempNum<=0){
						//删除数量小于0的购物车项
						cart.deleteCartItem(item.cd_id)
					}
					cart.changeItemQuantity(item,tempNum)
				} else if (index == 1) {
					tempNum = item.num+1
					cart.changeItemQuantity(item,tempNum)
				}
				context.emit('changeTotal')
			}
			return {
				handleOperate,baseImageUrl
			}
		}
	};
</script>

<style scoped lang="less">
	.container {
		display: flex;
		align-items: center;
		padding-top: 30rpx;
		flex-direction: row;

		.cartItemLogo {
			margin-right: 20rpx;
		}

		.goods-info {
			flex: 1;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 600;
			line-height: 40rpx;
			color: #666666;

		}

		.price-inner {
			color: red;
		}

		.title {
			padding-bottom: 10rpx;
		}

		.operate {
			display: flex;
			align-items: center;

			.operate-number {
				line-height: 90rpx;
			}
		}

	}
</style>